<template>
  <Index />
  <!-- 遮照层 -->
  <div v-if="showMask" class="mask"></div>
  <div class="container">
    <div class="content" v-loading="airLoading">
      <div class="platform">
        <div class="title">
          <span>本次机票已为您节省</span>
          <div class="price">
            <span>100</span>
            <span>元</span>
          </div>
        </div>
        <div class="horizontal"></div>
        <div class="air-select" >
          <div class="item" v-for="(item, index) in ticketList" :key="index">
            <div>
              <img
                :src="getPlatImg(item.source)"
                @click="getOrderList(item.source)"
              />
              <span>{{ item.source }}</span>
            </div>
            <div class="horizon"></div>
            <span class="price"
              >¥<span>{{ item.bottomPrice }}</span></span
            >
          </div>
        </div>
      </div>
      <div class="swiper-container">
        <div class="check-ticket">
          <div class="check-title">
            <img src="../../assets/img/bingo.png" alt="" />
            <span>当前选中机票</span>
          </div>
          <div>
            <span>{{ currIndex }}/{{ currSize }}</span>
          </div>
        </div>
        <div class="swiper-con">
          <div class="left" @click="toLeft">
            <img src="../../assets/img/left.png" alt="" />
          </div>
          <div class="right" @click="toRight">
            <img src="../../assets/img/right.png" alt="" />
          </div>

          <el-carousel
            height="200"
            :autoplay="false"
            :loop="false"
            trigger="click"
            arrow="never"
            indicator-position="outside"
            class="back-img-view"
            ref="cardShow"
          >
            <el-carousel-item v-for="item in orderList" :key="item">
              <TicketCard @addUser="addUser" :order="item"  />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="btn" @click="next">
          <span>下一步</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹出层，添加乘客 -->
  <div class="add-user" v-if="showAddUser">
    <div class="content">
      <div class="header-top">
        <div class="title-desc">
          <span class="title">添加乘车人员</span>
          <div class="desc">
            <span>2024年1月25日</span>
            <span>南航 CZ3210 22:00 ~ 00:50</span>
          </div>
        </div>
      </div>
      <div class="horizon"></div>
      <div class="body">
        <div class="form">
          <div class="item">
            <span>姓名</span>
            <el-input
              v-model="form.name"
              placeholder="请输入姓名"
              clearable
              style="margin-top: 10px"
            />
          </div>
          <div class="item">
            <span>身份证</span>
            <el-input
              v-model="form.num"
              placeholder="请输入身份证"
              clearable
              style="margin-top: 10px"
            />
          </div>
          <div class="item">
            <span>联系方式</span>
            <el-input
              v-model="form.phone"
              placeholder="请输入联系方式"
              clearable
              style="margin-top: 10px"
            />
          </div>
        </div>
        <div class="bottom">
          <div class="left-btn" @click="closeAddUser"><span>取消</span></div>
          <div class="right-btn"><span>提交</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import qunaer from "../../assets/img/qunaer.png";
import dh from "../../assets/img/dh.png";
import nh from "../../assets/img/nh.png";
import xc from "../../assets/img/xc.png";
import fz from "../../assets/img/fz.png";
import hc from "../../assets/img/12312.png";
import TicketCard from "../components/TicketCard.vue";
import { getAirTicketInfo } from "@/api/order.js";
import { ref } from "vue";
import { useRouter } from "vue-router";

let router = useRouter();
let showMask = ref(false);
let airLoading = ref(false);
let cardShow = ref();
let orderList = ref([]);
let showAddUser = ref(false);
let form = ref({
  name: "小王",
  num: "352213233321314421",
  phone: "12324123232",
});
let payList = ref([
  {
    img: qunaer,
    name: "去哪儿",
    price: "902",
  },
  {
    img: dh,
    name: "东航",
    price: "3323",
  },
  {
    img: nh,
    name: "南航",
    price: "1232",
  },
  {
    img: xc,
    name: "携程",
    price: "902",
  },
  {
    img: fz,
    name: "飞猪",
    price: "1332",
  },
  {
    img: hc,
    name: "12312",
    price: "431",
  },
]);

let currIndex = ref(1);
let currSize = ref();
let ticketList = ref([]);

//机票信息
async function ticketInfo() {
  airLoading.value = true;
  let { data } = await getAirTicketInfo({
    destinationPoint: "福州市",
    startingDate: "2024-04-01",
    startingPoint: "昆明",
    type: "最早",
  });
  ticketList.value = data.data;
  currSize.value=data.data.length-1;
  fistTicketOrder("南航", data.data);
  airLoading.value = false;
}

//获取平台图片信息
function getPlatImg(name: string) {
  return payList.value.find((item) => name.indexOf(item.name)).img;
}

//首次加载的机票
function fistTicketOrder(name: string, list: any[]) {
  orderList.value = list.find((item: any) => name.indexOf(item.name)).list;
}

//机票订单列表
function getOrderList(name) {
  if (ticketList.value) {
    let [ele] = ticketList.value.filter(
      (item) => item.source.indexOf(name) > -1
    );
    orderList.value = ele.list;
  }
}

function toLeft() {
  if (currIndex.value <= currSize.value && currIndex.value > 1) {
    currIndex.value--;
  }
  cardShow.value.prev();
}

function toRight() {
  if (currIndex.value < currSize.value) {
    currIndex.value++;
  }
  cardShow.value.next();
}

function closeAddUser() {
  showAddUser.value = false;
  showMask.value = false;
}

function next() {
  router.push("/progress");
}

function addUser() {
  // alert("添加成功");
  showAddUser.value = true;
  showMask.value = true;
}

ticketInfo();
</script>
<style scoped lang="scss">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  border: 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  border-radius: 0;
  border-bottom: 1px solid #ededed;
  // width: 300px;
  padding: 0;
}
.add-user {
  width: 336px;
  height: 487px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: #ffffff;
  border-radius: 15px;

  .content {
    .header-top {
      width: 336px;
      height: 117px;
      position: fixed; /* 定位为固定，使得背景图覆盖整个页面 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover; /* 背景图覆盖整个元素 */
      background-position: center; /* 背景图居中 */
      background-repeat: no-repeat; /* 背景图片不重复 */
      background-image: url("../../assets/img/tickbg.png");

      .title-desc {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        top: 42px;
        left: 22px;
        .title {
          width: 120px;
          height: 18px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #000000;
          line-height: 18px;
          text-align: left;
          font-style: normal;
        }
        .desc {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-top: 8px;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #576b76;
            line-height: 19px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .horizon {
      width: 336px;
      border: 1px dashed #4c4c4c;
      position: absolute;
      top: 25%;
      &::before {
        content: ""; /* 必须有内容属性，即使它为空字符串 */
        display: block; /* 或 inline-block，确保元素可以接受宽高和形状设置 */
        width: 25px; /* 圆的直径 */
        height: 25px;
        border-radius: 50%; /* 创建圆形 */
        background-color: #7f7f7f;
        /* 下面是可选的定位属性，例如居中显示（假设相对于父元素定位） */
        left: -19px;
        top: -13px;
        position: absolute;
      }

      &::after {
        content: ""; /* 必须有内容属性，即使它为空字符串 */
        display: block; /* 或 inline-block，确保元素可以接受宽高和形状设置 */
        width: 25px; /* 圆的直径 */
        height: 25px;
        border-radius: 50%; /* 创建圆形 */
        background-color: #7f7f7f;
        /* 下面是可选的定位属性，例如居中显示（假设相对于父元素定位） */
        right: -17px;
        top: -13px;
        position: absolute;
      }
    }
    .body {
      padding: 10px;
      display: flex;
      margin-top: 130px;
      justify-content: center;
      .form {
        width: 287px;
        height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // border: 1px solid;
        .item {
          width: 287px;
          height: 67.38px;
          span {
            width: 32px;
            height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #888888;
            line-height: 16px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .bottom {
        width: 287px;
        height: 50px;
        position: absolute;
        bottom: 20px;
        // border: 1px solid;
        display: flex;
        justify-content: space-between;
        .left-btn {
          width: 138px;
          height: 45px;
          background: #ffffff;
          border-radius: 33px;
          border: 1px solid #c4c4c4;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          &:hover {
            // background: #e6e6e6;
            transform: translateY(-1px);
            box-shadow: 0 5px 5px #0003;
          }
          span {
            width: 36px;
            height: 18px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #000000;
            line-height: 18px;
            text-align: center;
            font-style: normal;
          }
        }
        .right-btn {
          width: 138px;
          height: 45px;
          background: #005ff9;
          border-radius: 33px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          &:hover {
            // background: #e6e6e6;
            transform: translateY(-1px);
            box-shadow: 0 5px 5px #0003;
          }
          span {
            width: 36px;
            height: 18px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            line-height: 18px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }
}

.container {
  //  width: 100vw;
  height: 70vh;
  position: absolute;
  top: 48%;
  left: 58%;
  transform: translate(-50%, -50%);

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .platform {
      width: 371px;
      height: 430px;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
      border-radius: 14px;
      margin-right: 30px;

      .title {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 20px;
        & > :nth-child(1) {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          text-align: center;
          font-style: normal;
        }
        .price {
          margin-left: 7px;
          & > :nth-child(1) {
            font-family: Gotham, Gotham;
            font-weight: bold;
            font-size: 47px;
            color: #f23232;
            line-height: 47px;
            text-align: left;
            font-style: normal;
          }
          & > :nth-child(2) {
            width: 20px;
            height: 18px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #f23232;
            line-height: 18px;
            text-align: center;
            font-style: normal;
            margin-left: 3px;
          }
        }
      }
      .horizontal {
        border: 1px solid #dfdfdf;
        margin: 5px 0;
      }

      .air-select {
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 7px;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 18px;

          .horizon {
            width: 15vw;
            border: 1px solid #dfdfdf;
            margin: 5px 10px;
          }
          .price {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #6f6f6f;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            width: 80px;
          }
          & > :nth-child(1) {
            width: 9vw;
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
            img ~ span {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #6f6f6f;
              line-height: 16px;
              text-align: left;
              font-style: normal;
              margin-left: 5px;
            }
          }
        }
      }
    }
    .swiper-container {
      width: 55vw;
      // height: 53vh;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 30px;
      .check-ticket {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > :nth-child(2) {
          width: 55px;
          height: 26px;
          background: #ffffff;
          box-shadow: 0px 2px 6px 0px rgba(205, 207, 210, 0.27);
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 30px;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #252525;
            line-height: 18px;
            text-align: center;
            font-style: normal;
          }
        }

        .check-title {
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
          }
          & > :nth-child(2) {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #6f6f6f;
            line-height: 18px;
            text-align: center;
            font-style: normal;
            margin-left: 5px;
          }
        }
      }

      .swiper-con {
        width: 60%;
        position: relative;

        .left {
          position: absolute;
          top: 114px;
          left: -29px;
          z-index: 100;
          cursor: pointer;
          img {
            width: 50px;
            height: 50px;
          }
        }
        .right {
          position: absolute;
          top: 114px;
          left: 97%;
          z-index: 100;
          cursor: pointer;
          img {
            width: 50px;
            height: 50px;
          }
        }
      }
      .btn {
        width: 212px;
        height: 54px;
        background: #005ff9;
        border-radius: 27px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        // margin-top: 10%;
        position: absolute;
        bottom: 4vw;
        right: 30vw;

        span {
          width: 54px;
          height: 18px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
          line-height: 18px;
          text-align: center;
          font-style: normal;
        }
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
          span {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
